<template>
	<div :class="{xi_tab:true,auto:$attrs.height == 'auto'}">
		<el-table v-loading="loading" ref="tab" v-bind="$attrs" :data="tabdata" style="width: 100%" @selection-change="onchange" @sort-change="onsort">
			<el-table-column v-if="buts" align="center" type="selection" width="55" />
			<slot></slot>
		</el-table>
		<div class="foot">
			<div class="buts" v-if="buts">
				<el-button size="small" class="but" @click="$refs.tab.toggleAllSelection()">选择全部</el-button>
				<el-button size="small" class="but" @click="tabdata.map(v=>$refs.tab.toggleRowSelection(v))">反向全部</el-button>
				<template v-for="(v,k) in buts">
					<el-button v-if="v.fn" size="small" class="but start" v-bind="{...v,fn:''}" @click="onclick(v)">{{v.label}}</el-button>
					<el-dropdown v-if="v.fns" class="but_more" trigger="click" @command="but_more">
						<el-button class="but" size="small" v-bind="{...v,fn:''}">{{v.label}}<i class="el-icon-arrow-down el-icon--right"></i></el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(v2,k2) in v.fns" :key="k2" :icon="v2.icon" :command="{key:k+','+k2}">{{v2.name}}</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</div>
			<div class="page">
				<el-pagination
					v-if="pageShow === true"
					background
					@size-change="onsize"
					@current-change="onpage"
					:hide-on-single-page="updata !== null"
					:current-page.sync="page"
					:page-sizes="pageSizes"
					:page-size.sync="pageSize"
					:layout="updata === null?'total, sizes, prev, pager, next, jumper':'prev, pager, next'"
					:total="total">
				</el-pagination>
			</div>
			<div class="reload" v-if="reloadShow && pageShow === true && updata === null"><el-button title="刷新" size="mini" icon="el-icon-refresh" circle @click="up()"></el-button></div>
		</div>
	</div>
</template>

<script>
export default {
	props:{
		data:{
			default:null
		},
		pageSizes:{
			default(){
				return [20, 40, 60, 80]
			}
		},
		limit:{
			default:null
		},
		limitName:{
			default:'limit'
		},
		buts:{
			default(){
				return null
			}
		},
		pageShow:{
			default:true,
		},
		reloadShow:{
			default:true,
		}
	},
	data(){
		var vue = this;
		return {
			loading:false,
			tabdata:[],
			updata:null,
			page:1,
			pageSize:this.limit||this.pageSizes[0],
			total:0,
			select:[],
			sort:{},
		}
	},
	watch:{
		data(d){
			if(Array.isArray(d))this.up();
		}
	},
	methods:{
		async up(){
			this.loading = true;
			this.$set(this,'tabdata',[])
			var req = {page:this.page,...this.sort}
			req[this.limitName] = this.pageSize;
			var res = await (this.updata||this.data)(req);
			this.loading = false;

			this.$set(this,'tabdata',res.data||[])
			this.total = res.total;

			await this.$next();

			this.$emit('onup',{data:this.tabdata,tab:this.$refs.tab})

			if(this.$refs.tab)this.$refs.tab.doLayout()
		},
		onsize(){
			this.page = 1;
			this.up();
		},
		onpage(){
			this.up();
		},
		onclick(d){
			if(d && typeof d.fn === 'function'){
				d.fn(this.select)
			}
		},
		onchange(d){
			this.select = d;
			this.$emit('select',d)
		},
		onsort(d){
			this.sort.sort = d.prop;
			this.sort.desc = d.order == 'descending'?1:0;
			this.up();
		},
		clear(){
			this.tabdata.map(v=>this.$refs.tab.toggleRowSelection(v,false))
		},
		but_more(d){
			var [a,b] = d.key.split(',')

			var val = this.buts[a].fns[b];
			if(val && typeof val.fn === 'function')val.fn(this.select);
		}
	},
	mounted(){
		if(Array.isArray(this.data)){
			this.updata = async query=>{
				var num = (query.page - 1) * query.limit;

				return {data:this.data.slice(num,num+query.limit),total:this.data.length}
			}

			this.up();
		}
	}
}
</script>

<style lang="less" scoped>
.xi_tab{
	>.el-table{
		box-shadow: 0 0 6px 0px #cecece;
	}
	/deep/ .el-table__header-wrapper,/deep/ .el-table__fixed-header-wrapper{
		.el-table__cell{
			background: #F2F2F2;
		}
	}
	/deep/ .el-table th.el-table__cell>.cell{
		font-weight: normal;
	}
	/deep/ .el-table__fixed-right-patch{
		background: transparent;
	}
	>.el-table::before{height:0;}
	>.foot{
		display: flex;padding:10px 0;
		.buts{
			.but{
				margin:5px 10px 5px 0;height:32px;
			}
		}
		.page{
			justify-content: center;flex:1;display:flex;align-items: flex-end;
			padding:5px 0;
			.el-pagination{
				display: inline-block;
			}
		}
		.reload{
			padding:5px;display:flex;align-items: flex-end;
			.el-button{
				border-color:#999;
			}
		}
	}
	&.auto{
		flex:1;height:0;display:flex;flex-flow: column;
		>.el-table{
			flex:1;height:0;
		}
		>.foot{
			padding-bottom: 0;
		}
	}
	
	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{background-color:#058b8c;}
}
</style>